<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span class="seachStatus">
                {{$t('sta')}}
                <el-select v-model="emchncnt.status" :placeholder="$t('plsset')" size="mini">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('vlid')" value="VALID"></el-option>
                    <el-option :label="$t('invlid')" value="INVALID"></el-option>
                </el-select>
            </span>
            <el-button type="primary" @click="seachemchncon" v-preventReClick>{{$t('qury')}}</el-button>
            <!-- <el-button type="warning" @click="showAddNote">{{$t('add')}}</el-button> -->
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="emchncntTab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="emailContent" :label="$t('emailtemp')" width="832">
                </el-table-column>
                <el-table-column prop="emailType" :label="$t('emailtype')" width="227">
                </el-table-column>
                <el-table-column prop="emailSubject" :label="$t('emailsubject')" width="369">
                </el-table-column>
                <el-table-column prop="status" :label="$t('sta')">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="90" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showEditNote(scope.row)">{{$t('mdfy')}}</el-link>
                        <!-- <el-link type="primary" @click="showDel(scope.row)">{{$t('dlte')}}</el-link> -->
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="emchncnt.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="emchncnt.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <el-dialog :title="$t('mdfy')" :visible.sync="editDialogVisible" width="30%" @close="editDialogVisibleClosed(editemailForm)" center :close-on-click-modal="isOk" :modal-append-to-body="false">
            <el-form :ref="editemailForm" :rules="editsmsRules" :model="editemailForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('emailtemp')" prop="emailContent">
                    <el-input type="textarea" v-model="editemailForm.emailContent" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editemailconForm(editemailForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="editDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
  getemailcontentchnlist,
  updaemailtel
} from '@/libs/reqlist.js'
export default {
  data () {
    return {
      isOk: false,
      total: 0,
      emchncnt: {
        emailType: null,
        status: null,
        pageSize: 10,
        pageNum: 1
      },
      emchncntTab: [],
      editDialogVisible: false,
      editemailForm: {
        id: null,
        emailContent: null
      },
      editsmsRules: {
        emailContent: [
          { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    seachemchncon () {
      this.emchncnt.pageNum = 1
      this.getemchncon()
    },
    getemchncon() {
      getemailcontentchnlist(this.emchncnt).then(res => {
        if (res.data.code === '000000') {
          this.emchncntTab = res.data.data.list
          this.total = res.data.data.total - 0
          this.emchncntTab.forEach(item => {
            if (item.status === 'VALID') item.status = this.$t('vlid')
            if (item.status === 'INVALID') item.status = this.$t('invlid')
          })
        }
      })
    },
    showEditNote (data) {
      this.editemailForm.id = data.id
      this.editemailForm.emailContent = data.emailContent
      this.editDialogVisible = true
    },
    editemailconForm (form) {
      this.$refs[form].validate((valid) => {
          if (!valid) {
              return false
          }
          this.editemailForm.emailContent = this.editemailForm.emailContent.trim()
          updaemailtel(JSON.stringify(this.editemailForm)).then(res => {
            if (res.data.code === '000000') {
              this.$message({
                  message: this.$t('modfunsuc'),
                  type: 'success'
              })
              this.getemchncon()
              this.editDialogVisible = false
            }
          })
      })
    },
    editDialogVisibleClosed (form) {
        this.$refs[form].resetFields()
    },
    handleSizeChange (newSize) {
        this.emchncnt.pageSize = newSize
        this.getemchncon()
    },
    // 监听总页数变化
    handleCurrentChange (newNum) {
        this.emchncnt.pageNum = newNum
        this.getemchncon()
    }
  },
  mounted () {
    this.getemchncon()
  }
}
</script>

<style lang="less" scoped>
@import './emailchnctn.less';
</style>
